<script setup>import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getUserInfoByToken} from '../api/user';
const route = useRoute()
const tabs = ref([
    {
        name: "主页",
        url: "/home"
    },
    {
        name: "招募",
        url: "/recruit/search"
    },
    {
        name: "项目",
        url: "/project/search"
    },
])
const userInfo = ref({})
const isLogin = ref(false)
const isCurrentPath = (path) => {
    return route.path === path
}
onMounted(() => {
    getUserInfoByToken()
    .then(res=>{
        if(res.code===200){
            userInfo.value = res.data
            isLogin.value = true
        }
    })
})
</script>

<template>
    <van-sticky>
        <div class="header">
            <div class="content">
                <div class="navbar">
                    <router-link
                        :class="['bar', isCurrentPath(item.url) ? 'bar-active' : '']"
                        :to="item.url"
                        v-for="item, index in tabs"
                    >{{ item.name }}</router-link>
                </div>
                <div class="userinfo">
                    <div class="logined" v-if="isLogin">
                        <router-link to="/mine" class="name van-ellipsis">{{userInfo.name}}</router-link>
                        <van-image
                            round
                            width="25"
                            height="25"
                            fit="cover"
                            :src="userInfo.avatar"
                        />
                    </div>
                    <div class="logined" v-else>
                        <router-link to="/login" class="name">QQ登录</router-link>
                        <img class="qq" width="25" height="25" fit="cover" src="..\assets\QQ.svg" />
                    </div>
                </div>
            </div>
        </div>
    </van-sticky>
</template>

<style scoped>
.header {
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: var(--main-shadow);
}
.content {
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    max-width: var(--max-width);
}
.logined {
    display: flex;
    align-items: center;
    background-color: var(--main-color);
    padding: 5px;
    cursor: pointer;
    border-radius: 50px 50px 50px 50px;
}
.name {
    color: white;
    margin: 0px 10px;
    max-width: 100px;
}
.navbar {
    display: flex;
    flex-wrap: wrap;
}
.bar {
    box-sizing: border-box;
    padding: 5px 10px;
    margin: 0px 3px;
    cursor: pointer;
    color: var(--main-color);
    transition: all 0.3s;
}
.bar:hover {
    background-color: var(--light-color);
    border-radius: 50px;
    color: white;
}
.bar-active {
    background-color: var(--main-color);
    border-radius: 50px;
    color: white;
}
.qq {
    background-color: white;
    border-radius: 50px;
}
</style>